style(playground): Refactor layout, add icons and styles, fix sandbox animation

This pull request introduces several changes to the playground to improve its layout, visual appeal, and fix an animation bug.

Changes:

• Refactor Layout: The layout of the playground has been refactored to use flex to handle the space between the navbar and the app content. This ensures the sandbox will take the rest of the available space and prevent overflow and better responsiveness.
• Added Tabler Icons: The @tabler/icons-vue library has been added to provide icons for the project, improving the visual representation of actions and links. Notably, the GitHub link is replaced by a GitHub icon. These is to reduce the amount of text needed
• Style Adjustments: New colors have been added to playground/index.css to improve the general look of the playground some of these colors are not used right now but are very common and will be used in coming iterations.
• Fixed Sandbox Animation: A bug in the sandbox has been fixed to allow the animation to replay when the sandbox is clicked.

Why these changes?

• Improved User Experience: The new layout provides a better experience for the user by making the sandbox to be in its respective bounds.
• Enhanced Visuals: The addition of icons for decreasing text needed.
• Bug Fix: The replay animation function was not working in sandbox

Testing:

• The changes were tested by viewing on multiple devices.

Checklist:

• Code is properly formatted
• Changes are tested and working as expected.